<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="handleRouter">跳转到home</button>
    
  </div>
</template>


<script>
// style和script 都不是必须的
// 如果是普通组件那么只能是一个静态html
// 如果是函数式组件， 那么可以直接使用props等函数式组件属性
export default {
  name: 'Hi',
  data () {
    return {
      msg: 'Hi!!'
    }

    // 对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；
    // 而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题。
  },
// 在vue项目中如果methods的方法用箭头函数定义结果会怎么样？
// 因为箭头函数默绑定父级作用域的上下文，所以不会绑定vue实例，所以 this 是undefind
  methods:{
    handleRouter(){
      // 方法内部用$router
      this.$router.push('/');
      // 其他方法
      // replace,不会向history添加新记录，例如：
      // this.$router.replace('/');

      // go，类似于window.history.go(),例如：
      // this.$router.go(-1);

      // vue变量名如果以_、$开头的属性会发生什么问题？怎么访问到它们的值？
      // 实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。
      // 以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only 

你知道style加scoped属性的用途和原理吗？
用途：防止全局同名CSS污染
原理：在标签加上v-data-something属性，再在选择器时加上对应[v-data-something]，即CSS带属性选择器，以此完成类似作用域的选择方式

-->

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
